.archives-outer-wrap
  background: var(--color-wrap)
  border-radius: post-radius
  padding: 15px 0

.archives-wrap
  padding: 20px block-margin

.archives
  clearfix()
  list-style: none

.archive-year-wrap
  margin-bottom: 2em
  position: relative

  &:before
    content: ""
    width: 100%
    border-bottom: 1px solid var(--color-background)
    position: absolute
    bottom: -15px
    box-sizing: unset

  &:after
    transition: all 0.3s ease
    content: ""
    position: absolute
    background: var(--color-h2-after)
    width: 1em
    height: 7px
    bottom: -18px
    left: 0
    border-radius: 10px
    box-shadow: 0 2px 12px var(--color-h2-after-shadow)

  &:hover:after
    width: 3em

.archive-year
  text-decoration: none
  text-transform: uppercase

  color: var(--color-default-font)
  margin-bottom: 15px
  font-weight: bold
  font-size: 25px

.archive-article
  padding: 15px 0
  padding-left: 25px
  position: relative
  display: flex
  align-items: center

  &:before
    flex-shrink: 0
    content: ""
    width: 6px
    height: 15px
    background: var(--color-h2-after)
    display: inline-block
    vertical-align: middle
    margin-top: -2px
    margin-right: 11px
    margin-left: -25px
    box-shadow: 0 2px 12px var(--color-h2-after-shadow)
    opacity: 0.5
    transition: all 0.2s ease

  &:hover
    &:before
      width: 6px
      height: 6px
      border-radius: 50%
      opacity: 1
      transition: all 0.2s ease

    .archive-article-title
      transition: all 0.3s ease
      opacity: 1

.archive-article-date-wrap
  flex-shrink: 0

  a
    text-decoration: none

.dt-published
  color: var(--color-grey)
  margin-left: 5px

.archive-article-title
  display: inline-block
  text-decoration: none
  font-weight: bold
  color: var(--red-0)
  transition: all 0.3s ease
  opacity: 0.6
  margin-left: 15px

#page-nav
  clearfix()
  margin: block-margin auto
  background: var(--color-wrap)
  border-radius: post-radius
  text-align: center
  color: var(--color-grey)
  overflow: hidden
  transition: all 0.3s ease

  &:hover
    box-shadow: 0 0 10px 3px var(--color-hover-shadow)

  a, span
    padding: 10px 15px

  a
    color: var(--color-grey)
    text-decoration: none
    transition: background 0.2s ease

    &:hover
      background: var(--red-2)
      color: #fff

  .prev
    float: left
    padding: 15px 15px

  .next
    float: right
    padding: 15px 15px

  .page-number
    display: inline-block
    border-radius: post-radius
    margin: 5px 5px
    @media mq-mobile
      display: none

  .current
    background: var(--red-1)
    color: white
    font-weight: bold
    box-shadow: 0 2px 12px rgba(255, 78, 106, 0.55)
    @media mq-mobile
      display: inline-block

  .space
    display: inline-block
    margin: 5px 5px
    color: var(--color-border)
    @media mq-mobile
      display: none

.tag-wrap
  display: flex
  flex-wrap: wrap
  padding: 10px block-margin

  a
    text-decoration: none

  .archives-tag-list-item
    text-decoration: none
    text-transform: uppercase
    background: var(--red-5)
    border-radius: 20px
    padding: 8px 15px

    margin: 5px

  .archives-tag-list-link
    color: var(--red-1)
    font-size: 12px

    &:before
      font-family: font-icon
      margin-right: 10px
      content: "\f02b"

.category-wrap
  display: flex
  flex-wrap: wrap
  padding: 10px block-margin

  a
    text-decoration: none

  .archives-category-list-item
    text-decoration: none
    text-transform: uppercase
    background: var(--red-6)
    border-radius: 20px
    padding: 10px 20px

    margin: 5px

  .archives-category-list-link
    color: var(--red-1)
    font-size: 14px

    &:before
      font-family: font-icon
      margin-right: 10px
      font-weight: 900
      content: "\f02e"
